<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
	<meta charset="UTF-8">
	<link rel="shortcut icon" th:href="@{/fav.ico}">
	<link rel="stylesheet" th:href="@{/css/iconfont.css}">
	<link rel="stylesheet" th:href="@{/css/global.css}">
	<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
	<link rel="stylesheet" th:href="@{/css/bootstrap-theme.min.css}">
	<link rel="stylesheet" th:href="@{/css/swiper.min.css}">
	<link rel="stylesheet" th:href="@{/css/styles.css}">
	<script th:src="@{/js/jquery.1.12.4.min.js}" charset="UTF-8"></script>
	<script th:src="@{/js/bootstrap.min.js}" charset="UTF-8"></script>
	<script th:src="@{/js/swiper.min.js}" charset="UTF-8"></script>
	<script th:src="@{/js/global.js}" charset="UTF-8"></script>
	<script th:src="@{/js/jquery.DJMask.2.1.1.js}" charset="UTF-8"></script>
	<title>订单中心</title>
</head>
<body>
	<!-- 顶部tab -->
	<div th:replace="fragments/common::top-tab"></div>
	<!-- 顶部标题 -->
	<div class="bgf5 clearfix">
		<div class="top-user">
			<div class="inner">
				<a class="logo" th:href="@{/}"><img src="images/icons/whlogo.png" alt="旺和" class="cover"></a>
				<div class="title">订单中心</div>
			</div>
		</div>
	</div>
	<div class="content clearfix bgf5">
		<section class="user-center inner clearfix">
			<div class="pull-left bgf">
				<a  class="title">订单中心</a>
				<dl class="user-center__nav">
					<a class="site-active link" th:data-url="|@{/order/getUserOrderPage}|"><dd class="active">我的订单</dd></a>
					<a class="site-active link" id="collect" th:data-url="|@{/order/getUserCollectionPage}|"><dd>我的收藏</dd></a>
					<a class="site-active link" id="refund_btn" th:data-url="|@{/order/getOrderRefundPage}|"><dd>退款/退货</dd></a>
				</dl>
			</div>
			<div class="pull-right">
				<iframe name="iframe" id="iframeId" th:src="@{/order/getUserOrderPage}"   onload="adjustIframe();" width="100%" style="border-width: 0px" scrolling="no"></iframe>
				<div class="user-content__box clearfix bgf" id="collect_frame" style="display: none">
					<div class="title">订单中心-我的收藏</div>
					<div class="collection-list__area clearfix">
						<div class="item-card" th:each="product:${list}">
							<a th:href="@{/product/getProductDetailPage(id=${product.id})}" class="photo">
								<img th:src="${product.getMainImage()}" th:alt="${product.name}" class="cover">
								<div class="name" th:text="${product.name}"></div>
							</a>
							<div class="middle">
								<div class="price" th:utext="'<small>￥</small>'+${product.getPrice()}"></div>
							</div>
						</div>

					</div>
					<div class="page text-right clearfix">
					</div>
					<script th:inline="javascript">
						var x=8;
						//分页!
						{
							var itemcount=0;
							$("div.item-card").each(function(innerIndex, innerElement) {
								itemcount=itemcount+1;
								// 设置自定义属性 index
								$(innerElement).attr("data-index", innerIndex+1);
								if(innerIndex>=x){
									$(innerElement).css("display",'none')
								}

							});
							var page_div=$("div.page.text-right");
							page_div.attr("data-total",itemcount);
							page_div.attr("data-cur-page",1);
							var pageCount= Math.ceil(itemcount / x);
							page_div.attr("data-pagenum",pageCount);
							if(pageCount!=0){
								var lastP = $("<a  class='toLastPage link disabled'>上一页</a>");
								var nextP = $("<a class='toNextPage link disabled'>下一页</a>");
								if(pageCount>1){
									nextP = $("<a class='toNextPage link'>下一页</a>");
								}
								$(page_div).append(lastP);
								for (var i = 1; i <= pageCount; i++) {
									if(i==1){
										$(page_div).append($("<a class='pageBtn link select' data-p="+i+">"+i+"</a>"));
									}else{
										$(page_div).append($("<a class='pageBtn link' data-p="+i+">"+i+"</a>"));
									}
								}
								$(page_div).append(nextP);
							}
						};
						//点击页码
						$('.pageBtn').click(function (){
							var thisPage=$(this).data('p')
							$(this).siblings('a.pageBtn').each(function (){
								$(this).removeClass('select');
							})
							$(this).addClass('select');
							//遍历order
							var parent_div=$(this).parents('div.page');
							var order_table=parent_div.siblings('div.collection-list__area');//
							//设置parent_div属性
							parent_div.attr("data-cur-page",thisPage);
							var total=parent_div.data('pagenum');
							var lastBtn=$(this).siblings('.toLastPage')
							var nextBtn=$(this).siblings('.toNextPage')
							// console.log(thisPage)
							// console.log(total)
							if(thisPage==1 && total!=1){
								lastBtn.addClass('disabled');
								lastBtn.removeClass('link');
								nextBtn.removeClass('disabled');
								nextBtn.addClass("link");
							}
							if(thisPage==total && total!=1){
								lastBtn.removeClass('disabled');
								lastBtn.addClass("link");
								nextBtn.addClass('disabled');
								nextBtn.removeClass('link');
							}
							//
							order_table.find("div.item-card").each(function(innerIndex, innerElement) {
								var elePage=$(innerElement).data('index');
								//console.log(elePage);
								var a=x*(thisPage-1)+1
								var b=x*(thisPage-1)+x
								if(elePage>=a && elePage<=b){
									$(innerElement).css('display','');
								}else {
									$(innerElement).css('display','none');
								}
							});
							$('.link').css("cursor", "pointer");
						})
						//上一页
						$('.toLastPage').click(function (){
							var parent_div=$(this).parents('div.page');
							var thisPage=parent_div.data('curPage')-1;
							if(thisPage<1){
								thisPage=1;
							}
							$(this).siblings('a.pageBtn').each(function (){
								if($(this).data('p')==thisPage){
									$(this).click();
								}
							})
						})
						//下一页
						$('.toNextPage').click(function (){
							var parent_div=$(this).parents('div.page');
							var thisPage=parent_div.data('curPage')+1;
							if(thisPage>parent_div.data('total')){
								thisPage=parent_div.data('total');
							}
							$(this).siblings('a.pageBtn').each(function (){
								if($(this).data('p')==thisPage){
									$(this).click();
								}
							})
						})


						$('.link').css("cursor", "pointer");
					</script>
				</div>
			</div>
		</section>
	</div>
	<!-- 右侧菜单 -->
	<div th:replace="fragments/common::right-menu"></div>
	<!-- 底部信息 -->
	<div th:replace="fragments/common::bottom-bar"></div>
</body>
<script th:inline="javascript">
	var iframeId=$('#iframeId');
	var collectFrame=$('#collect_frame');
	$('.site-active').click(function() {
		var thisId=$(this).attr("id");
		if(thisId=='collect'){
			iframeId.css("display","none");
			collectFrame.css("display","");
			return;
		}else{
			iframeId.css("display","");
			collectFrame.css("display","none");
		}
		window.open($(this).data('url'), "iframe");
	});
	function adjustIframe(){
		 var ifm= document.getElementById("iframeId");
		 let aWindow = ifm.contentWindow;
		 ifm.height=aWindow.document.body.scrollHeight;
	}
	$('.site-active').click(function (){
		$(this).siblings().each(function() {
			$(this).removeClass('active');
			var dd=$(this).find('dd')
			dd.removeClass('active');
		});
		$(this).addClass('active');
		var thisdd=$(this).find('dd');
		thisdd.addClass('active');
	})
	$('.link').css("cursor", "pointer");
</script>
</html>